<template>
  <div>
    <h3>vuex</h3>
    <p>count: {{ count }}</p>
    <button @click="fn">btn</button>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  setup() {
    // 执行useStore返回store实例,写在顶层
    // 用了setup就不能使用辅助函数了
    const store = useStore();
    const count = computed(() => {
      return store.state.count;
    });

    const fn = () => {
      store.commit("add");
    };

    return {
      count,
      fn,
    };
  },
  // computed: {
  //   count() {
  //     return this.$store.state.count;
  //   }
  // }
};
</script>

<style lang="less" scoped></style>
